<template>
  <view class="body">
    <view class="report_item">
      <view class="title">
        <image class="img_title" src="@/static/image/raozg/complete1.png" />
        <text>总检结论</text>
      </view>
      <view class="detail" @tap="toDetail('main', null)">
        <view class="detail_name">主检报告</view>
        <image class="img_more" src="@/static/image/raozg/more.png" />
      </view>
    </view>
    <view class="report_item">
      <view class="title">
        <image class="img_title" src="@/static/image/raozg/complete2.png" />
        <text>体格检查</text>
      </view>
      <view
        v-for="(item, index) of checkList.find(item => item.peItemTypeCode == '1')?.peGroupList || []"
        :key="index"
        @tap="toDetail('normal', item)"
        class="detail"
      >
        <view class="detail_name">{{ item.peItemGroupName }}</view>
        <view class="detail_error">
          <text v-if="item.error && item.error > 0"
            ><text style="color: #ff503d; font-weight: bold;">{{ item.error }}</text
            >项异常</text
          >
          <image class="img_more" src="@/static/image/raozg/more.png" />
        </view>
      </view>
    </view>
    <view class="report_item">
      <view class="title">
        <image class="img_title" src="@/static/image/raozg/complete3.png" />
        <text>实验室检查</text>
      </view>
      <view
        v-for="(item, index) of checkList.find(item => item.peItemTypeCode == '3')?.peGroupList || []"
        :key="index"
        @tap="toDetail('normal', item)"
        class="detail"
      >
        <view class="detail_name">{{ item.peItemGroupName }}</view>
        <view class="detail_error">
          <text v-if="item.error && item.error > 0"
            ><text style="color: #ff503d; font-weight: bold;">{{ item.error }}</text
            >项异常</text
          >
          <image class="img_more" src="@/static/image/raozg/more.png" />
        </view>
      </view>
    </view>
    <view class="report_item">
      <view class="title">
        <image class="img_title" src="@/static/image/raozg/complete4.png" />
        <text>辅助检查</text>
      </view>
      <view
        v-for="(item, index) of checkList.find(item => item.peItemTypeCode == '2')?.peGroupList || []"
        :key="index"
        @tap="toDetail('support', item)"
        class="detail"
      >
        <view class="detail_name">{{ item.peItemGroupName }}</view>
        <view class="detail_error">
          <text v-if="item.error && item.error > 0"
            ><text style="color: #ff503d; font-weight: bold;">{{ item.error }}</text
            >项异常</text
          >
          <image class="img_more" src="@/static/image/raozg/more.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import store from '@/store'

const props = defineProps({
  peTypeList: {
    type: Array,
    default: () => []
  },
  suggest: {
    type: String
  }
})

const checkList = ref([])

onMounted(() => {
  checkList.value = props.peTypeList
  checkList.value.forEach((item: any) => {
    item.peGroupList.forEach((val) => {
      let num = 0
      val.peItemList.forEach((v) => {
        if (v.normal != 'n') {
          num++
        }
      })
      val.error = num
    })
  })
})

const toDetail = (type: string, item: any) => {
  if (type == 'main') {
    uni.navigateTo({
      url:
        '/packA/pages/report/reportDetail/checkDetail?type=' +
        type +
        '&suggest=' +
        props.suggest +
        '&title=' +
        '主检报告'
    })
  } else {
    store.commit('SET_PHYSICAL', item.peItemList)
    uni.navigateTo({
      url:
        '/packA/pages/report/reportDetail/checkDetail?type=' +
        type +
        '&suggest=' +
        item.summary +
        '&title=' +
        item.peItemGroupName
    })
  }
}
</script>

<style lang="scss" scoped>
.body {
  height: calc(100vh - 322rpx);
  overflow: auto;
  padding-bottom: 32rpx;
  .report_item {
    margin-bottom: 24rpx;
    background: #fff;
    .title {
      height: 108rpx;
      display: flex;
      align-items: center;
      padding-left: 32rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      .img_title {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }
    }
    .detail {
      height: 108rpx;
      border-top: 1rpx solid #e5e6eb;
      padding: 0 32rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .detail_name {
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
      }
      .detail_error {
        font-weight: 500;
        font-size: 30rpx;
        color: #666;
        display: flex;
        align-items: center;
      }
      .img_more {
        width: 40rpx;
        height: 40rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
